<template>
    <div>
        <el-dialog title="修改信息" :visible.sync="dialogUpdateFormVisible">
            <el-form>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input v-model="callback.content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-select
                            size="mini"
                            v-model="callback.callbackType.id"
                            placeholder="全部"
                            style="width:100px"
                    >
<!--                        <el-option key="0" label="全部" value="0"></el-option>-->
                        <el-option
                                v-for="item in callbackTypes"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageInfo.pageSizes"
                    :page-size="pageInfo.pageSize"
                    :current-page="pageInfo.pageNum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.totalPage"
            >
            </el-pagination>
        </div>
        <div>
            <el-select
                    size="mini"
                    v-model="callbackVo.callbackTypeId"
                    placeholder="全部"
                    @change="getByType"
                    style="width:100px"
            >
<!--                <el-option key="0" label="全部" value="0"></el-option>-->
                <el-option
                        v-for="item in callbackTypes"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button
                    icon="el-icon-refresh-right"
                    slot="trigger"
                    size="mini"
                    type="primary"
                    @click="reset()">重置
            </el-button>
        </div>

        <div >
            <el-table
                    :data="callbacks"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="内容">
                                <span>{{ props.row.content }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="序号"
                        type="index">
                </el-table-column>
                <el-table-column
                        label="类型"
                        prop="callbackType.name">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 0,
                    pageSizes: [5, 10, 15, 20]
                },
                callbacks:[],
                callbackTypes:[],
                callback:{
                    id:0,
                    content:"",
                    callbackType:{
                        id:0,
                        name:""
                    },
                },
                callbackType:{
                  id:0,
                  name:""
                },
                callbackVo:{
                    id:0,
                    content:"",
                    callbackTypeId:"",
                    pageNum:0,
                    pageSize:0,
                    typeName:""
                },
                dialogUpdateFormVisible: false,
                formLabelWidth: '120px',
            }
        },
        methods:{
            reset(){
                this.callbackVo.callbackTypeId="";
                this.callbackVo.pageNum=this.pageInfo.pageNum;
                this.callbackVo.pageSize=this.pageInfo.pageSize;
                this.getList()
            },
            getByType(id){
                console.log(id);
                this.callbackVo.callbackTypeId=id;
                this.getList()
            },
            update(){
                let callbackVo={
                    id:this.callback.id,
                    content:this.callback.content,
                    callbackTypeId:this.callback.callbackType.id,
                    pageNum:this.pageInfo.pageNum,
                    pageSize:this.pageInfo.pageSize,
                }
                this.$axios.post("/api/xjh/callback/update",callbackVo).then(r=>{
                    if(r.data.code==200){
                        this.getList();
                        this.dialogUpdateFormVisible=false;
                    }
                })
            },
            handleDelete(index,row){
                let callbackVo={
                    id:row.id,
                };
                this.$axios.post("/api/xjh/callback/delete",callbackVo).then(r=>{
                    if(r.data.code==200){
                        this.getList();
                    }
                })
            },
            handleEdit(index,row){
                this.dialogUpdateFormVisible=true;
                let callbackVo={
                    id:row.id
                }
                console.log(callbackVo)
                this.$axios.post("/api/xjh/callback/getById",callbackVo).then(r=>{
                    if(r.data.code==200){
                        this.callback=r.data.data;
                    }
                })
            },
            handleSizeChange(val) {
                this.callbackVo.pageSize=val;
                this.callbackVo.pageNum=this.pageInfo.pageNum
                this.getList()
            },
            handleCurrentChange(val) {
                this.callbackVo.pageNum=val;
                this.callbackVo.pageSize=this.pageInfo.pageSize
                this.getList()
            },
            getList(){
                this.$axios.post("/api/xjh/callback/getList",this.callbackVo).then(r=>{
                    if(r.data.code==200){
                        this.callbacks=r.data.data.list;
                        this.pageInfo.totalPage=r.data.data.total;
                    }
                })
                this.$axios.post("/api/xjh/callback/getAllType").then(r=>{
                    if(r.data.code==200){
                        this.callbackTypes=r.data.data;
                        console.log(this.callbackTypes)
                    }
                })
            },
        },
        created() {
            this.callbackVo.pageNum=this.pageInfo.pageNum;
            this.callbackVo.pageSize=this.pageInfo.pageSize;
            this.getList()
        }
    }
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>